<template>
	
	<div v-for="(item ,index) in tableDataCopy">
		<el-checkbox  v-model="item[0].x" @change="addEmpId(item[0].empId,item[0].x)" :disabled="kpiFlag">被考核人：{{item[0].empName}}</el-checkbox>
		<el-table
      :data="item"
      border
      style="width: 90%; margin: 20px auto;border-radius: 8px; margin: 20px auto;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="empName" label="被考核人" />
      <el-table-column prop="name" label="提成考核"  />
      <el-table-column prop="target1" label="条目" width="150" />
      <el-table-column prop="inTarget1" label="/￥"  width="100" />
      <el-table-column prop="target2" label="条目" width="150" />
      <el-table-column prop="inTarget2" label="/￥"  width="100" />
      <el-table-column prop="result" label="结算/￥"  />
    </el-table>
		<div style="text-align: right;margin-right: 200px;margin-bottom: 20px;"> 总计：{{totalList[index]}}￥</div>
	</div>
    
    
</template>

<script  setup>
import {ref, onBeforeMount, reactive,getCurrentInstance,watch} from "vue";

let props = defineProps({
  kpiList: {
    type: Array,
    required: true, //是否规定必须得有
  },
  empList3: {
    type: Array,
    required: true, //是否规定必须得有
  },
  update3: {
    type: Function,
    required: true, //是否规定必须得有
  },
  flag:{
    type: Number,
    required: false, //是否规定必须得有
  },
})

watch(props, (newValue, oldValue) => {
  tableData.value=newValue.kpiList
  for(let item of newValue.kpiList) {
  total.value += Number(item.result);
  if(newValue.flag == 1){
  	  kpiFlag = true
  }else{
  	  kpiFlag = false
  }
}
},{ deep: true });   
var kpiFlag = true
const tableData = ref(props.kpiList)
const total = ref(0);




const tableDataCopy = []
var data = [];
var flag =1
// console.log(tableData.value)

for(var i = 0 ; i<tableData.value.length;i++){
	
	data.push(tableData.value[i])
	
	if(i+1<tableData.value.length && tableData.value[i].empName != tableData.value[i+1].empName){
		tableDataCopy.push(data)
		data = []
		flag++;
	}
	
}

tableDataCopy.push(data)

var totalx = 0
var totalList = [];
for(let i=0 ; i < tableDataCopy.length ; i++ ){
	
	for(let y = 0 ; y<tableDataCopy[i].length;y++){
		totalx += parseFloat(tableDataCopy[i][y].result)
	}
	totalList[i] = totalx.toFixed(2)
	totalx = 0
}



var empList = []

const addEmpId = (empId,x) =>{
	if(x){
		empList.push(empId)
	}else{
		empList.pop(empId)
	}
	props.update3(empList,"empList3")
}


</script>







<style lang="scss" scoped>

.formWrapper{
    width: 100%;
    border: 2px solid #DCDFE6;
    margin: 20px 0;
    border-radius: 5px;
    .formTitle{
        height: 50px;
        font-weight: bold;
        color: #303133;
        font-size: 25px;
        text-align: center;
        line-height: 50px;
        border-bottom: #DCDFE6 1px solid;
    }

    .form{
        width: 1200px;
        margin: 20px auto;
        border-radius: 5px;
        .title {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .title_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #337ECC;
                text-align: center;
                color: #fff;
                line-height: 50px;
                font-size: 20px;
            }
        }
        .centent {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;/* 替代space-between布局方式 */
            .centent_box{
                width: 200px;
                flex: 1;
                height: 50px;
                background-color: #79bbff;
                color: #fff;
                padding: 5px;
                line-height: 40px;
                text-align: center;
            }
        }
    }
    .button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
}
</style>
